<template>
  <div class="container">

    <!-- 添加用户按钮和搜索框 -->
    <div class="search-container">
      <el-input v-model="searchKeyword" placeholder="搜索员工" clearable @keyup.enter.native="searchUsers" class="search-input"></el-input>
    </div>
    <!-- 使用 Element UI 的表格组件 -->
    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="eid" label="员工编号"></el-table-column>
      <el-table-column prop="ename" label="员工名字"></el-table-column>
      <el-table-column prop="ephone" label="电话"></el-table-column>
      <el-table-column prop="esex" label="性别">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.esex === 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="eage" label="年龄"></el-table-column>
      <el-table-column prop="pid" label="项目类型">
        <template slot-scope="scope">
          {{ scope.row.pid === 1 ? '美容項目' : '美发项目' }}
        </template>
      </el-table-column>
      <el-table-column prop="tid" label="技术类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{meifaList.find(item => item.tid === scope.row.tid).tname}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="lid" label="员工等级">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{employeeLevel.find(item => item.value === scope.row.lid).label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="照片">
        <template slot-scope="scope">
          <img :src="'http://localhost:9990/' + scope.row.photos" width="100" />
        </template>
      </el-table-column>
    </el-table>


    <!-- 使用 Element UI 的分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagebean.total"
      :page-size="pagebean.pagesize"
      :current-page="pagebean.pagenow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

const employeeLevel = [
  { value: 1, label: '高级'},
  { value: 2, label: '中级'},
  { value: 3, label: '初级'}
]

export default {
  data() {
    return {
      emp: {},
      pagebean: {
        total: 0,
        pagesize: 2,
        pagenow: 1,
        data: []
      },
      searchKeyword: '', // 存储搜索关键词
      filteredData: [], // 存储过滤后的数据
      fileList: [], // 存储上传文件列表
      employeeLevel: employeeLevel,
      meifaList: []
    };
  },
  created() {
    this.doload();
    this.searchTechnology();
  },
  methods: {
    handleCurrentChange(val) {
      this.pagebean.pagenow = val;
      this.doload();
    },
    doload() {
      const that = this;
      this.$axios.get(`http://localhost:9990/empseconodmeifa/${this.pagebean.pagenow}/${this.pagebean.pagesize}`)
        .then(response => {
          that.pagebean = response.data;
          that.filteredData = response.data.data; // 初始化过滤后的数据
        });
    },

    searchUsers() {
      // 过滤数据
      this.filteredData = this.pagebean.data.filter(emp => {
        return (
          emp.ename.includes(this.searchKeyword) ||
          emp.esex.includes(this.searchKeyword) ||
          emp.eage.includes(this.searchKeyword) ||
          emp.ephone.includes(this.searchKeyword) ||
          emp.tid.includes(this.searchKeyword) ||
          emp.lid.includes(this.searchKeyword) ||
          emp.photos.includes(this.searchKeyword)
        );
      });
    },
    searchTechnology() {
      const that = this;
      this.$axios.get(`http://localhost:9990/technology-meifa`)
        .then(response => {
          that.meifaList = response.data;
        });
    }
  }
};
</script>

<style scoped>


/* 搜索框 */
.search-input {
  display: inline-block;
  width: 1230px; /* 调整宽度 */
  margin-bottom: 20px;
}

/* 搜索容器 */
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  text-align: center;
}

/* 表单容器 */
.form-container {
  margin-top: 20px;
}
</style>
